<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
  <title>CFTagLib - The Form Group</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <style type="text/css">
  #g_title p, #g_footer p, #g_description p {
    margin: 0;
  }
  /*

  	-- -- -- -- -- -- --
  	Browser Fixes
  	-- -- -- -- -- -- --
  	
  	This file uses CSS filtering methods to fix various
  	layout bugs.

  	Each of the following three imported files is a 
  	separate, browser-specific CSS file that keeps all 
  	hacks out of the main style sheet.
  	
  	Over time, as supporting these browsers no longer
  	remains a priority, cleaning up the hacks is as
  	easy as deleting the @import statement below, or
  	simply no longer linking this file from the HTML.
  	
  */

  /* 
    fix ie6 "peekaboo bug" using the "holly hack". 
    Note, this style only gets applied to ie6
  */
  * html .wrapper {
    height: 0.1%;
  }

  /* 
   * IE5 mac - overrides the IE/Win hack 
   */

  /*\*//*/

  * html #threecolumn div {
  	height: auto;
  }

  /**/


  /* 
   * IE5/Win-specific CSS -ensures #container wraps all content on window resize
   */

  @media tty {
   i{content:"\";/*" "*/}} * html #container { height: 1%; } /*";}
  }/* */
  /* Styling for editable elements. Eventually, this will be part of the style. */
  .editable {
    border: 1px dashed blue;
  }
  
  #footer {
    clear: both;
  }
  
  /* Extra divs hidden by default. The custom CSS can override this though */
  #extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 {
    display: none;
  }
  
  a img,:link img,:visited img {border: none;}


  /*
    -- -- -- -- -- -- --
    1 Column Layout
    -- -- -- -- -- -- --
  */

  /* Center #container, constrain to 718px width
  ----------------------------------------------- */
  body {
    text-align: center;
  }
  #container {
    width: 718px;
    text-align: left;
    margin: 0 auto;
  }

  #main-content {
    overflow: hidden;
  }

  /** BEGIN CUSTOM SKIN **/
  /* general layout */

  body {
    font-family: Lucida Grande, Lucida Sans Unicode, Verdana, Helvetica, Arial, sans-serif;
    font-size: 83%;
    margin: 0em;
    padding: 0em;
    border-top: 1em solid #e2e6ec;
    background: #e2e6ec url(container-fill.gif) center repeat-y;
  }
  body div#container {
    padding: 0em;
    margin-top: 0em;
    border-top: 1px solid #e2e6ec; /* a hack: without it Firefox adds top margin in layouts with sidebar */
    background: url(container-top.gif) top no-repeat;
  }
  div#container div.wrapper {
    padding: 0em;
    margin: 0em;
  }
  div#header {
    padding: 0em 35px;
    padding-top: 2em;
    padding-bottom: 2em;
    _padding-bottom: 1em; /* hack for IE6 */
    margin: 0em;
    margin-top: 2em;
    background: url(header-fill.gif) repeat-y;
  }
  div#header div.wrapper {
    padding: 0em;
    margin: 0em;
  }
  div#main-content {
    line-height: 160%;
    color: #3f3f3f;
    background: url(content-top.gif) top no-repeat;
  }
  div#sidebar,div#sidebar-alternate {
    font-size: 83%;
    line-height: 140%;
    color: #3f3f3f;
    background: url(content-top.gif) top no-repeat;
    padding: 0em;
    margin: 0em;
    padding-top: 1.5em;
  }
  div#footer {
    margin-top: 2em;
    background: url(content-top.gif) top no-repeat;
    padding: 1em 35px;
    color: #7f7f7f;
  }
  div#footer hr { /* I don't like this, but I have no idea why that <hr> is there */
    display: none;
  }

  /* adjusting widths for different layouts */

  body#onecolumn div#main-content {
    padding: 0em 35px;
    width: 648px;
  }
  body#twocolumn-right div#main-content {
    padding: 0em 25px;
    width: 420px;
    margin-left: 10px;
  }
  body#twocolumn-left div#main-content {
    padding: 0em 25px;
    width: 420px;
    margin-right: 8px;
    display: inline;
  }
  body#twocolumn-left div#sidebar {
    padding-left: 15px;
    width: 215px;
  }
  body#twocolumn-right div#sidebar {
    padding-right: 15px;
    width: 215px;
  }
  body#threecolumn div#main-content {
    padding: 0em 25px;
    width: 370px;
  }
  body#threecolumn div#sidebar {
    padding-left: 15px;
    width: 125px;
    margin-left: 10px;
    display: inline;
  }
  body#threecolumn div#sidebar-alternate {
    padding-right: 15px;
    width: 125px;
  }

  /* general styles: headings */

  h1, h2, h3, h4, h5, h6, p.description {
    font-family: Lucida Grande, Lucida Sans Unicode, Verdana, Helvetica, Arial, sans-serif; 
  }
  h1 {
    font-size: 160%;
    font-weight: bold;
    color: black;
    border-bottom: 1px solid #b3e6e6;
    padding-bottom: 0.2em;
    display: inline; /* so that the underline spans only text width, and not the entire page */
    line-height: 400%; /* for padding below, the above line took away other possibilities */
  }
  h2 {
    font-size: 120%;
    font-weight: bold;
    color: black;
    border-bottom: 1px solid #b3e6e6;
    padding-bottom: 0.2em;
    display: inline; /* so that the underline spans only text width, and not the entire page */
    line-height: 400%; /* for padding below, the above line took away other possibilities */
  }
  h3 {
    font-size: 110%;
    font-weight: bold;
    border-bottom: 1px solid #b3e6e6;
    padding-bottom: 0.2em;
    color: black;
    display: inline; /* so that the underline spans only text width, and not the entire page */
    line-height: 300%; /* for padding below, the above line took away other possibilities */
  }
  h4 {
    font-size: 100%;
    font-weight: bold;
    border-bottom: 1px solid #b3e6e6;
    padding-bottom: 0.2em;
    color: black;
    display: inline; /* so that the underline spans only text width, and not the entire page */
    line-height: 200%; /* for padding below, the above line took away other possibilities */
  }
  h5 {
    font-size: 100%;
    font-weight: bold;
    color: black;
    display: inline;
  }
  h6 {
    font-size: 100%;
    font-weight: normal;
    color: black;
    display: inline;
  }
  hr {
    background: white;
    height: 1px;
    border: 0em;
    border-top: 1px solid #b3e6e6;
    margin: 1em 0em;
  }

  /* general styles: links */

  a {
    color: #125ebc;
    text-decoration: none;
    border-bottom: 1px solid #125ebc; /* this underline is further away from the text = more legibility */
  }
  a:visited {
    color: #638bbc;
    text-decoration: none;
    border-bottom: 1px solid #638bbc; /* this underline is further away from the text = more legibility */
  }

  /* general styles: lists */

  ul, ol {
    margin-left: 1.8em;
    padding: 0em;
  }
  dt {
    margin-left: 1.8em;
  }
  blockquote {
    margin-left: 1.8em;
  }

  /* general styles: tables */

  table {
    border-collapse: collapse;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: -0.6em;
    margin-right: -0.6em;
  }

  table td,table th {
    padding: 0.3em 0.6em;
    vertical-align: top;
    text-align: left;
  }
  
  table tr td{
      border: 1px solid #b3e6e6;
  }
  
  table th {
    border-bottom: 1px solid #b3e6e6;
  }
  table caption {
    text-align: left;
    font-weight: bold;
    color: #4FBBBB;
    padding: 0em;
    _padding: 0em 0.6em; /* hack for IE6: it understands padding differently here */
  }

  /* specific styles */

  h1#page-title {
    font-size: 220%;
    font-weight: normal;
    color: #125ebc;
    letter-spacing: -1px;
    display: block;
    border: 0em;
    padding: 0em;
    margin: 0em;
    line-height: 100%;
  }
  div#g_description {
    font-size: 140%;
    font-weight: normal;
    color: #125ebc; 
  }

  /* correcting horizontal margins for different layouts */

  body#twocolumn-left div#header, body#threecolumn div#header {
    padding-left: 25px;
  }

  /** END CUSTOM SKIN **/
  </style>

  <!-- Hack to avoid flash of unstyled content in IE -->
  

<script language="JavaScript">
<!--

function SymError()
{
  return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
  return (new Object());
}

window.open = SymWinOpen;

//-->
</script>

<script> </script>
</head>

<body id="onecolumn">
  <div id="container">
    <div class="wrapper">
      <div id="header">
        <div class="wrapper">
          <h1 id="page-title"><div id='g_title'><p>The Form Group</p></div></h1>

          <div style="clear: both;"></div>
          <p class="description"><div id='g_description'>&nbsp;</div></p>
          <div style="clear: both"></div>
        </div>
      </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="tags.html">&laquo; Previous</a> | <a href="cf_form.html">Next &raquo;</a>
      <!-- /editable --><!-- /wrapper --><!-- /header -->
      <div id="main-content">
        <div class="wrapper">
          <div class="content-item"><div id='g_body'><p></p> 
<link href="style.css" rel="stylesheet">


<h3>The Form Group</h3> 
<br/><br/>
The goal for the form group is to make creating form a lot simpler, to ensure 508 compliance and consistency across your application.<br/><br/>
	The order a tag would determine its value is:&nbsp; 
		<ol> 
			<li>It uses <span style="font-style: italic;">attributes.field_name</span> if it exists.&nbsp; </li>
			<li>It then checks for <span style="font-style: italic;">qryQuery.field_name</span> if <em>attributes.field_name</em> doesn't exist.&nbsp; </li>
			<li>It then checks for the <em>default</em> attribute if specified and if <em>qryQuery.field_name</em> doesn't exist.&nbsp; </li>
			<li>If none of the above exists, it sets the value to blank (""). </li>
		</ol>
<p><span style="font-style: italic;">Attributes.field_name</span> overwrites <span style="font-style: italic;">qryQuery.field_name</span> because if validation fails, it kicks back to the form and you would want the values the user entered to retain.&nbsp;</p> 

The form group is controlled by the cf_form tag.  Any attributes of the children tags that the html equivalent form tag doesn't have can be set in the cf_form tag for all children tags in the form.  This means you can set the <em>option</em> attribute in the <em>cf_form</em> tag for all the <em>cf_select</em> tags in the form, but you cannot set the <em>style</em> attribute for all children tags because we can't tell whether this <em>style</em> is intended for the form tag only or for all the children tags in the form.  So you have to set the <em>style</em> attribute individually in each field or use the <em>request.ui.form.all.html.style</em> variable to set it.
<br/><br/>
The majority of tags in the form group has the <em>forLabel</em>, <em>id</em>, and <em>name</em> attributes.  They are often identical.  So naturally you only have to specify one. <em>Name</em> is the key attribute. It takes less time to process if <em>name</em> exists.  Hence it is better to specify <em>name</em> over <em>id</em> and <em>forLabel</em>.  There are other attributes that can be figured out from the <em>name</em> attribute.  We will point them in individual tags where they apply.
<br/><br/>
We try to take care of the field's label for you, but not much, so sometimes it is not necessary for you to specify the <em>label</em> attribute.  For example, if the field name is <em>first_nm</em> or <em>first_name</em>, the label will be <em>First Name:</em>.  If the field name is <em>state_cd</em> or <em>user_id</em>, the label will be <em>State:</em> and <em>User:</em> respectively.  However, <em>firstName</em> will remain <em>FirstName:</em>.  In another word, we will remove <em>_</em>, <em>cd</em>, <em>id</em>, and <em>txt</em>, but we will change <em>nm</em> to <em>name</em>.  If you use other conventions, please let us know.  We will try to work it in for you.
<br/><br/>
<h4>Available Attributes</h4>
<br/>These are the attributes available for all or the majority of tags in the form group.  We put them here so we won't put them on every tag.
<table>
<tr>
<th>Attribute</th>
<th>Required</th>
<th>Default</th>
<th>Values</th>
<th>Description</th>
</tr>
<tr><td>break</td><td>false</td><td>true</td><td>true<br/>false</td><td>Whether to add a br tag at the end of the field. Not applicable to hidden field</td></tr>
<tr><td>classLabel</td><td>false</td><td>label</td><td></td><td>the css class name for the label tag. Not applicable to hidden field</td></tr>
<tr><td>classRequired</td><td>false</td><td>required</td><td></td><td>the css class name for the required field. Not applicable to hidden field</td></tr>
<tr><td>css</td><td>false</td><td>true</td><td>true<br/>false</td><td>whether to add the default css to the page's head section. Not applicable to hidden field</td></tr>
<tr><td>default</td><td>false</td><td>blank("")</td><td></td><td>The default value for the field. Not applicable to password and file fields</td></tr>
<tr><td>forLabel</td><td>false</td><td>id attribute's value</td><td></td><td>the for attribute of the label tag. Not applicable to hidden field</td></tr>
<tr><td>label</td><td>false</td><td>derived from field name</td><td></td><td>label text for the field. Not applicable to hidden field</td></tr>
<tr><td>required</td><td>false</td><td>false</td><td>true<br/>false</td><td>whether the field is required. Not applicable to hidden field</td></tr>
<tr><td>theme</td><td>false</td><td></td><td></td><td>the name of the theme for the field</td></tr>
<tr><td>themePath</td><td>false</td><td></td><td></td><td>the path to the theme for the field</td></tr>

</table>
</div></div>
          <div style="clear: both"></div>
        </div>
      </div>
      <!-- /wrapper --><!-- /main-content -->
      <div id="footer"><div class="wrapper">
        <hr /><a href="tags.html">&laquo; Previous</a> | <a href="cf_form.html">Next &raquo;</a>
        <p><div id='g_footer'>&nbsp;</div></p>
        <div style="clear: both"></div>
      </div></div>

      <!-- /wrapper --><!-- /footer -->
    </div>
  </div>
<!-- /wrapper --><!-- /container -->

<div id="extraDiv1"><span></span></div><div id="extraDiv2"><span></span></div>
<div id="extraDiv3"><span></span></div><div id="extraDiv4"><span></span></div>
<div id="extraDiv5"><span></span></div><div id="extraDiv6"><span></span></div>

</body>
</html>

<script language="JavaScript">
<!--
var SymRealOnLoad;
var SymRealOnUnload;

function SymOnUnload()
{
  window.open = SymWinOpen;
  if(SymRealOnUnload != null)
     SymRealOnUnload();
}

function SymOnLoad()
{
  if(SymRealOnLoad != null)
     SymRealOnLoad();
  window.open = SymRealWinOpen;
  SymRealOnUnload = window.onunload;
  window.onunload = SymOnUnload;
}

SymRealOnLoad = window.onload;
window.onload = SymOnLoad;

//-->
</script>

